<!DOCTYPE html>
<html>
    <head>
        <style>
            :root {
              --background-color: transparent;
              --foreground-color: #000;
              --foreground-secondary-color: #666;
              --border-color: #e2e2e2;
            }

            @media (prefers-color-scheme: dark) {
              :root {
                --background-color: #1c1c1e;
                --foreground-color: #fff;
                --foreground-secondary-color: #adadaf;
                --border-color: #2b2b2d;
              }
            }

            html, body, .container {
                background-color: var(--background-color);
                height: 98%;
            }

            .loader {
                border: 2px solid var(--border-color);
                border-top: 2px solid var(--foreground-color);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                animation: spin 2s linear infinite;
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            .container {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .container>div {
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="loader"></div>
        </div>
    </body>
</html>

